<template>
  <div style="font-size: 12px;display: flex;">
    <div style="flex: 1;font-size: 18px">
      <span :class="collapseClass" style="cursor: pointer" @click="collapse"></span>
      <div style="display: inline-block;margin-left: 20px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="item.path" v-for="(item, index) in paths" style="cursor: pointer">{{
              item.meta.title
            }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <el-dropdown style="width: 120px;cursor: pointer;margin-right: 10px">
      <div style="display: inline-block">
        <el-avatar size="medium" :src="user.avatarUrl" style="vertical-align: middle"></el-avatar>
        <span style="margin-left: 5px">{{ user.nickname }}</span>
        <i class="el-icon-caret-bottom" style="margin-left: 5px"></i>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <span @click="getPersion">个人信息</span>
        </el-dropdown-item>
        <el-dropdown-item>
          <span @click="logout">退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import router from "@/router";

export default {
  props: {
    collapseClass: {
      type: String,
      default: () => {
        return 'el-icon-s-fold'
      },
    },
    user: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      paths: [],
      // user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  watch: {
    // 监听路由变化
    $route: {
      handler() {
        this.getNavList()
      },
      immediate: true
    }
  },
  methods: {
    router() {
      return router
    },
    getNavList() {
      // 它返回一个数组，这个数组包含了所有被当前激活的路由所匹配的记录
      // 移除了第一个数组元素
      this.paths = this.$route.matched.slice(1);
      // this.paths = this.$route.matched
    },
    collapse() {
      // 菜单折叠
      this.$emit('collapse')
    },
    logout() {
      this.$store.commit('logout')
    },
    getPersion() {
      this.$router.push('/persion')
    }
  },
}
</script>

<style>
</style>
